<template>
  <div class="update-logs overflow-auto">
    <q-timeline class="no-margin" color="secondary">
      <template v-for="log in logs" :key="log.version">
        <q-timeline-entry :subtitle="log.date">
          <template v-slot:title>
            <q-badge class="text-dark text-body2 text-bold text-uppercase" color="grey-4">{{ log.version }}</q-badge>
          </template>
          <template v-slot:default>
            <q-item v-for="(logTxt, index) in log.logs" :key="index">
              <q-item-section avatar>
                <q-badge color="grey-5" rounded></q-badge>
              </q-item-section>
              <q-item-section>
                <q-item-label class="text-body2" lines="5">{{ logTxt }}</q-item-label>
              </q-item-section>
            </q-item>
          </template>
        </q-timeline-entry>
      </template>
    </q-timeline>
  </div>
</template>

<script setup>
import { computed } from 'vue'
import { i18n } from 'boot/i18n'
import { versionCompare } from 'src/utils/utils'
import updateLogs from 'src/i18n/UpdateLogs/ZH_CN.json'

const logs = computed(() => {
  const logList = []
  for (const key in updateLogs) {
    if (!key.toUpperCase().startsWith('V')) continue
    const { addTip = true, date, version, ...params } = updateLogs[key]
    const log = { date, version, logs: [] }
    for (const elKey in params) {
      if (!elKey.toUpperCase().startsWith('LOG')) continue
      log.logs.push(i18n.t(`${key}.${elKey}`))
    }
    if (addTip) log.logs.push(i18n.t('UpdateLogTip'))
    logList.push(log)
  }
  logList.sort((a, b) => a.date > b.date ? -1 : a.date < b.date ? 1 : versionCompare(a.version, b.version))
  return logList
})

</script>